<template>
	<!-- 表格 -->
	<el-table ref="multipleTableRef" :data="tableData" @selection-change="handleSelectionChange" :border="border" :stripe="stripe" :height="tableHeight" :scrollbar-always-on="true" :row-class-name="tableRowClassName" :show-summary="showSummary" :summary-method="sumColumn" :id="tid" >
		<el-table-column type="selection" v-if="selection" fixed></el-table-column>
		<template v-for="(item, index) in tableconfig" :key="index">
			<el-table-column v-if="item.visible == false" :prop="item.prop" :width="item.width" :label="item.label" :align="item.align" :fixed="item.fixed" :sortable="item.sortable" :show-overflow-tooltip="item.tooltip">
				<template v-if="item.slot" #default="scope">
					<!-- 具名插槽 -->
					<template v-if="item.prop">
						<slot :name="item.prop" :scope="scope"></slot>
					</template>
					<template v-else>
						<slot :scope="scope"></slot>
					</template>
				</template>
				<!-- 多级表头 -->
				<template v-if="item.column">
					<template v-for="(bitem, bindex) in item.column" :key="bindex">
						<el-table-column :prop="bitem.prop" :width="bitem.width" :label="bitem.label" :align="bitem.align" :fixed="bitem.fixed" :sortable="bitem.sortable" :show-overflow-tooltip="bitem.tooltip"> </el-table-column>
					</template>
				</template>
			</el-table-column>
		</template>
	</el-table>
</template>

<script setup>
	
	const prop = defineProps({
		// 表格id
		tid: {
			type: String,
		},
		tableData: {
			type: Array,
			default: () => [],
		},
		tableconfig: {
			type: Array,
			default: () => [],
		},
		style: {
			type: Object,
			default: () => {},
		},
		tableHeight: {
			type: Number,
		},
		// 斑马条纹
		stripe: {
			type: Boolean,
			default: false,
		},
		// 边框
		border: {
			type: Boolean,
			default: false,
		},
		//   是否使用复选框
		selection: {
			type: Boolean,
			default: true,
		},
		// 表格的单选还是多选
		highlightCurrentRow: {
			type: Boolean,
		},
		// 是否在表格显示合计一行
		showSummary: {
			type: Boolean,
		},
		sumColumn: {
			type: Function,
		},
	});
	const emit = defineEmits(['selectingTable']);
	const multipleTableRef = ref();
	const multipleSelection = ref([]);

	// 当选择项发生变化时会触发该事件
	const handleSelectionChange = val => {
		multipleSelection.value = val.map(item => {
			return toValue(item);
		});
		emit('selectingTable', toValue(multipleSelection.value));
	};
</script>

<style scoped></style>
